<template>
  <div :class="$style.wrap">
    <div v-for="(q,i) in questionList" :key="q.key||i">
      <h3 :id="q.id" :class="$style.qDesc">
        {{ charNum(i) }}、{{ q.questionTitle }}
        <span v-if="!isPreview" :class="$style.btn">
          <Question :chapter-id="chapterId" :questionnaire-id="questionnaireId" :question="q" type="text" title="编辑" @on-refresh="onRefresh"></Question>
          <Button type="text" @click="removeHandle(q.id)">删除</Button>
        </span>
      </h3>
      <ul :class="$style.aList">
        <li v-for="(a,ai) in q.questionOptionDTOList" :key="a.id">
          <div v-if="q.questionType!==2" :class="$style.aItem">
            <CharIndex v-model="q.result" :editable="editable" :class="$style.fillRow" :label="ai" :char-index="charA(ai)" :multiple="q.questionType===1" :round="q.questionType===0" @question-click="questionClickHandle(q.id)">
              {{ genTitle(a) }}
              <el-input v-if="a.isEnter === 1" v-model="q.enterContent[ai]" :readonly="!editable" type="textarea" :autosize="{minRows:1}" clearable></el-input>
            </CharIndex>
          </div>
          <div v-else :class="$style.aItem">
            <p :class="$style.aDesc">{{ a.optionContent }}</p>
            <el-input v-model="q.enterContent[ai]" :placeholder="a.enterContent" :readonly="!editable" :class="$style.fillRow" type="textarea" :autosize="{minRows:1}" clearable></el-input>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { charNum, charA } from '../../common'
import CharIndex from './charIndex'
import Question from '../question'
import { questionnaireItemDelete } from '@/api/questionnaire'
export default {
  name: 'PreviewQuestion',
  components: {
    CharIndex,
    Question
  },
  props: {
    questionList: {
      type: Array,
      default: () => []
    },
    chapterId: {
      type: String,
      default: ''
    },
    questionnaireId: {
      type: String,
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  methods: {
    charNum,
    charA,
    removeHandle(id) {
      this.$msgbox({
        title: '提示',
        message: '确认删除？',
        showCancelButton: true,
        type: 'warning'
      }).then(() => {
        questionnaireItemDelete({
          id,
          questionnaireId: this.questionnaireId,
          chapterId: this.chapterId
        }).then(res => {
          this.$message.success('删除成功！')
          this.onRefresh()
        })
      })
    },
    // 修改题目
    onRefresh() {
      this.$emit('on-refresh')
    },
    // 选项
    genTitle(a) {
      let t = a.optionContent
      if (a.scoreValue) {
        t += ` (${a.scoreValue}分)`
      }
      return t
    },
    // 去掉outline
    questionClickHandle(id) {
      const ele = document.getElementById(id)
      if (ele.parentElement && ele.parentElement.classList.contains('noAnswer')) {
        ele.parentElement.classList.remove('noAnswer')
      }
    }
  }

}
</script>
<style lang="scss" module>
.wrap{
  .qDesc{
    font-size: 16px;
    margin: 0 0 10px 0;
    border-bottom: 1px dotted #333;
    color: rgba(0,0,0,0.85);
  }
  .aList{
    list-style: none;
    padding: 0 0 0 20px;
    margin: 0 0 20px 0;
    & li + li {
      margin-top: 10px;
    }
    .aItem{
      .aDesc{
        font-size: 14px;
        margin: 0;
      }
    }
  }
  .btn{
    font-weight: normal;
    float: right;
    & [class*="el-button--text"]{
      padding: 0 5px 0 0 !important;
    }
  }
}
</style>
